import React, { Component, Fragment } from 'react';
import { inject, observer } from 'mobx-react';
import {
  WeaTab, WeaNewScroll, WeaDialog, WeaLocaleProvider, WeaBrowser, WeaButtonIcon, WeaRightMenu,
} from 'ecCom';
import { toJS } from 'mobx';
import { WeaTableNew, WeaLogView } from 'comsMobx';
import { Button } from 'antd';
import CorrespondFieldComp from './CorrespondFieldComp';

const WeaLogViewComp = WeaLogView.Component;
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject('unitSetStore', 'correspondFieldStore')
@observer
export default class UniteEdit extends Component {
  componentDidMount() {
    const { unitSetStore } = this.props;
    // unitSetStore.getUnitAdmin();
    unitSetStore.getTabData();
    // unitSetStore.getclerkList();
  }

  getColumns = (columns) => {
    const { unitSetStore } = this.props;
    return columns.map((col) => {
      if (col.dataIndex == 'lastname') {
        return {
          ...col,
          title: col.title,
          render: (text, record) => {
            if (record.returnTypespan != 'false') {
              return (<a style={{ color: '#4d7ad8' }} onClick={() => unitSetStore.clearkOperate(record, '', '', '0')} >{text}</a>);
            }
            return (<span>{text}</span>);
          },
        };
      }
      return col;
    });
  }

  // 渲染单位信息编辑表单
  getEditUnitForm() {
    const { editUnitForm } = this.props.unitSetStore;
    return (
      <div className="newUnit">
        {editUnitForm.render({ needTigger: true })}
      </div>
    );
  }

  // 文员表单change事件
  clerkEdit(input) {
    const { unitSetStore } = this.props;
    let key = Object.keys(input)[0];
    unitSetStore.clerkObj[key] = input[key];
  }

  // 改变单位管理员类型改变
  changeAdminType(input) {
    let { unitSetStore } = this.props;
    if (input.type.value == '0') {
      unitSetStore.showAdmin = '0';
      if (unitSetStore.origin == '1') {
        unitSetStore.isValue = false;
      }
    } else {
      unitSetStore.showAdmin = '1';
    }
  }

  render() {
    const { unitSetStore } = this.props;
    const { clerkForm, form, clerkTableStore, selectForm, broForm, editClerkForm, range, changeVerificationCode,
      recUnitTableStore, recUnitDialogVisible, recUnitDialogShow, recUnitForm, onCheck, editUnitLogShow,
      unitId,
    } = unitSetStore;
    const menu = [{
      key: '1',
      icon: <i className="icon-coms-rizhizhongxin" />,
      content: getLabel(83, '日志'),
      onClick: () => editUnitLogShow(),
    }];

    return (
      <div className="editDialog">
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@fs2h0j`}
          datas={unitSetStore.topTab}
          keyParam="viewcondition" // 主键
          countParam="groupid" // 数量
          selectedKey={toJS(unitSetStore.selectedKey)}
          onChange={v => unitSetStore.operate('', '', '', v)}
          buttons={this.getTabBtns()}
        />

        {/* 基本信息 */}
        {(unitSetStore.selectedKey == '0' && unitSetStore.companyAdmin === undefined) && this.getEditUnitForm()}

        {/* 单位管理员 */}
        {
          (unitSetStore.selectedKey == '1' && unitSetStore.companyAdmin === undefined) &&
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@y08q47`} ref="scroll" className="unitadmin">
            {/* 账号类型 */}
            {selectForm.render({ needTigger: false }, { onChange: input => this.changeAdminType(input) })}
            {/* 新建账号用的form */}
            {unitSetStore.showAdmin == '0' && form.render({ needTigger: false })}
            {/* 从OA中选择用的form */}
            {unitSetStore.showAdmin == '1' && broForm.render({ needTigger: false })}
          </WeaNewScroll>
        }

        {/* 收发文员管理 */}{/* 当是单位管理员登录的时候 只显示收发文员管理个字段设置 */}
        {
          unitSetStore.selectedKey == '2' &&
          <Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@z92xy4`}>
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ngfn7i`}
              getColumns={this.getColumns}
              comsWeaTableStore={clerkTableStore}
              hasOrder={true}
              needScroll={false}
              rowSelection={{
                selectedRowKeys: unitSetStore.clerkSelectedRowKeys,
                onChange: unitSetStore.clerkOnRowSelect,
              }}
              onOperatesClick={unitSetStore.clearkOperate}
              pageSizeOptions={[10]}
            />

            <div className="addClerk">
              {
                unitSetStore.showAddClerk || <div className="selectOne" >
                  <div onClick={() => unitSetStore.getClerkForm()}>{getLabel(387951, '新建账号')}</div>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@9o9qso`}
                    ref="browser1"
                    type={17}
                    customized
                    title={getLabel(387967, '从OA中选取')}
                    icon="icon-coms-danweishezhi"
                    onChange={(ids, names, datas) => unitSetStore.broAddClerk(ids, names, datas)}
                    isSingle={false}
                  >
                    {getLabel(387967, '从OA中选取')}
                  </WeaBrowser>
                </div>
              }
            </div>
          </Fragment>
        }

        {
          unitSetStore.selectedKey == '3' &&
          <div className="fieldTable">
            <CorrespondFieldComp ecId={`${this && this.props && this.props.ecId || ''}_CorrespondFieldComp@3fv95r`} ref="correspondField" unitId={unitId} />
          </div>
        }

        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5affbd`} datas={menu} >
          {
            unitSetStore.selectedKey == '4' &&
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@jqupdh`}
              comsWeaTableStore={recUnitTableStore}
              hasOrder={true}
              needScroll={false}
              rowSelection={{
                selectedRowKeys: unitSetStore.recUnitSelectedKeys,
                onChange: unitSetStore.recUnitRowSelected,
              }}
              onOperatesClick={unitSetStore.recUnitOperate}
              pageSizeOptions={[10]}
            />
          }
        </WeaRightMenu>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@c4il9a`}
          title={
            (unitSetStore.showClerkForm == '0' && getLabel(387625, '新增收发文员')) ||
            (unitSetStore.showClerkForm == '1' && getLabel(387624, '编辑收发文员'))
          }
          visible={unitSetStore.editClerkDialogVisable}
          style={{ width: '30%', height: 'auto' }}
          onCancel={() => {
            unitSetStore.editClerkDialogVisable = false;
            unitSetStore.clerkId = '';
          }}
          buttons={
            [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v9dz7b@save`} type="primary" onClick={() => onCheck(unitSetStore.clerkForm, 'addClerk')} >{getLabel(30986, '保存')}</Button>]
          }
          icon={'icon-coms-danweishezhi'}
        >
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4eg98r`} height={'auto'} ref="scroll" className="uniteEdit">
            {/* showClerkForm等于0显示新建文员的form */}
            {(unitSetStore.showClerkForm == '0' && clerkForm.render({ needTigger: false }, { onChange: input => this.clerkEdit(input) }))}

            {unitSetStore.showClerkForm == '1' &&
              <div>
                {editClerkForm.render({ needTigger: false }, { onChange: input => this.clerkEdit(input) })}
                {/*eslint-disable */}
                <img
                  src={`/weaver/weaver.file.MakeValidateCode?from=_changePass&isView=1&validatetype=0&validatenum=4&seriesnum_=${range}`}
                  onClick={() => changeVerificationCode()}
                  className="verificationCode"
                />
                {/* eslint-enable */}
              </div>
            }
          </WeaNewScroll>
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@csfyvm`}
          title={
            (unitSetStore.showRecUnitForm == '0' && getLabel(501243, '编辑收发文单位')) ||
            (unitSetStore.showRecUnitForm == '1' && getLabel(501245, '新建收发文单位'))
          }
          visible={recUnitDialogVisible}
          style={{ width: '30%', height: '160' }}
          onCancel={() => recUnitDialogShow()}
          buttons={
            [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2gz4pc@save`} type="primary" onClick={() => onCheck(recUnitForm, 'saveRecUnit')} >{getLabel(30986, '保存')}</Button>]
          }
          icon={'icon-coms-danweishezhi'}
          className="odoc-recUnitAddDialog"
        >
          {recUnitForm.render()}
        </WeaDialog>

        <WeaLogViewComp ecId={`${this && this.props && this.props.ecId || ''}_WeaLogViewComp@wz5k16`}
          visible={unitSetStore.editUnitLogVisible}
          onCancel={() => {
            unitSetStore.editUnitLogVisible = !unitSetStore.editUnitLogVisible;
          }}
          logStore={unitSetStore.editUnitLogStore}
          logType={unitSetStore.editUnitLogType}
          logSmallType={unitSetStore.editUnitLogSmallType}
        />
      </div>
    );
  }

  getTabBtns() {
    const { unitSetStore, correspondFieldStore } = this.props;
    const { clerkIdArr, deleteClerk, selectedKey, recUnitDialogShow } = unitSetStore;
    let buttons = [];
    const disabled = clerkIdArr.length == 0;
    const disabled2 = correspondFieldStore.checkKeys == 0;
    if (selectedKey == '2') {
      buttons = [
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@jgduhe@add`} buttonType="add" type="primary" onClick={() => unitSetStore.showAddClerk = !unitSetStore.showAddClerk} />,
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@y6cdd7@del`} buttonType="del" type="primary" disabled={disabled} onClick={() => deleteClerk('', '', '', '1')} />,
      ];
    }
    if (selectedKey == '3') {
      buttons = [
        // <Button type='primary' disabled={disabled2} onClick={() => this.batchDegrade()} >批量降级</Button>,
        // <Button type='primary' disabled={disabled2} onClick={()=>this.batchUpgrade()} >批量升级</Button>,
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@18d4df@del`} buttonType="del" type="primary" disabled={disabled2} onClick={() => this.batchDeleteField()} />,
      ];
    }
    if (selectedKey == '4') {
      buttons = [
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@63eujg@add`} buttonType="add" type="primary" onClick={() => recUnitDialogShow()} />,
        // <WeaButtonIcon buttonType='del' type="primary" disabled={disabled1} onClick={() => deleteRecUnit("", "", "", "1")} />,
      ];
    }
    return buttons;
  }

  // 批量删除XML节点
  batchDeleteField() {
    this.refs.correspondField.wrappedInstance.batchDelete();
  }

  // 批量降级节点
  batchDegrade() {
    this.refs.correspondField.wrappedInstance.batchDegrade();
  }

  // 批量降级节点
  batchUpgrade() {
    this.refs.correspondField.wrappedInstance.batchUpgrade();
  }

  // 保存xml节点
  saveTreeData() {
    this.refs.correspondField.wrappedInstance.saveTreeData();
  }
}
